<template>
  <a-row justify="start" class="navDiv">
    <a-col :span="4">
      <caret-left-outlined class="itemLi" @click="backRouter" />
      <caret-right-outlined class="itemLi" @click="goRouter" />
    </a-col>
    <a-col :span="16">
      <RouterLink
        :to="item.path"
        v-for="item in navLiData"
        :key="item.path"
        class="itemLi"
        >{{ item.laber }}</RouterLink
      >
    </a-col>
    <a-col :span="4">
      <div class="ss">
        <a-input-search
          class="selectInput"
          v-model="searchInput"
          placeholder="搜出你的心情"
        ></a-input-search>
        <smile-outlined class="onLogin" @click="onLogin" />
      </div>
    </a-col>
  </a-row>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/runtime-core";
import {
  CaretLeftOutlined,
  CaretRightOutlined,
  SmileOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
const navLiData = [
  {
    laber: "首页",
    path: "/",
    active: true,
  },
  {
    laber: "发现",
    path: "/find",
    active: false,
  },
  {
    laber: "视频库",
    path: "/musicLibrary",
    active: false,
  },
];

export default defineComponent({
  name: "app",
  components: { CaretLeftOutlined, CaretRightOutlined, SmileOutlined },
  setup() {
    // 初始化路由
    const router = useRouter();
    //   定义searchInput来装搜索栏的内容
    const searchInput = ref();
    //  登录页面跳转
    function onLogin() {
      router.push({
        path: "/login",
      });
    }
    //   给前进按钮和后退按钮添加返回上一页和前往前进函数
    function backRouter() {
        router.go(-1)
    }
    function goRouter() {
        router.go(1)
    }
    return {
      navLiData,
      searchInput,
      onLogin,
      backRouter,
      goRouter
    };
  },
});
</script>

<style lang="less" scoped>
.navDiv {
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  .itemLi {
    margin-right: 2rem;
    margin-left: 2rem;
    padding: 0.4rem;
    color: rgb(0, 0, 0);
    border: solid 2px rgb(0, 0, 0);
    border-radius: 4px;
  }
  .ss {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: flex-start;
    .selectInput {
      margin-top: 0.8rem;
      border: solid 2px rgb(0, 0, 0);
      border-radius: 4px;
    }
    .selectInput:hover {
      margin-top: 1rem;
      border: solid 0px rgb(0, 0, 0);
    }

    .onLogin {
      margin-left: 4rem;
      margin-top: 0.58rem;
      padding: 0.6rem;
      border: solid 2px rgb(0, 0, 0);
      border-radius: 4px;
      box-sizing: border-box;
    }
    .onLogin:hover {
      color: #5599ff;
      cursor: pointer;
      animation: identifier 1.5s;
      border-radius: 50%;
      background-color: #ffddaa;
    }
  }
}
@keyframes identifier {
  0% {
    border-radius: 4px;
  }
  100% {
    border-radius: 50%;
    background-color: #ffddaa;
  }
}
.itemLi:hover {
  box-sizing: border-box;
  color: #5599ff;
  cursor: pointer;
}
</style>
